<template>
	<view class="center">
		<u-navbar title="微信解锁记录" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff" :background="{backgroundColor:'#2A2931'}"></u-navbar>
		
		<u-tabs-swiper class="header" :style="{background: '#0f0d0f'}" active-color="#A87B38" inactive-color="#ccc"
			ref="uTabs" :list="swipertypelist" :current="swipertypeCurrent" 
			@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		
		<swiper class="list" :current="swipertypeCurrent" @transition="transitions" @animationfinish="animationfinishs" :style="{height: 'calc(100vh - '+ (fixswiper.footer+fixswiper.header) +'px)'}">
			<swiper-item class="swiper-item" v-for="(itemccc, indexccc) in swipertypelist" :key="indexccc">
				<scroll-view scroll-y style="height: 100%;width: 100%;" lower-threshold="100" 
					refresher-background="#000" @refresherrefresh="refresherrefresh" refresher-enabled 
					:refresher-triggered="refresher[indexccc]" refresher-default-style="white" @scrolltolower="onreachBottom">
					<!-- <view class="swiperwrap">
						<u-swiper class="uswiper" mode="dot" name="img" :list="swiperlist"></u-swiper>
					</view> -->
					<!-- <u-grid class="u-grid" :col="4" :border="false">
						<u-grid-item v-for="(item,index) in cate" :key="item.name" @click="catedymanic(item.name,item.id)">
							<image :src="HOSTURL + item.image"></image>
							<view class="grid-text">{{item.name}}</view>
						</u-grid-item>
					</u-grid> -->
					<view class="list" v-if="dymaniclist[indexccc]!=''">
						<dy-item v-for="(item,index) in dymaniclist[indexccc]" :key="index" @zan="zan(index)" @dyopsshow="dyopsshow(index)" :item="item"></dy-item>
					</view>
					<image v-else src="/static/wx_unlock.png" class="zwjsjl" mode="aspectFill"></image>
					<!-- <u-loadmore bg-color="#000" :style="{padding: '20rpx 0'}" :status="status" /> -->
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import dyItem from '@/components/dy-item.vue'
	export default {
		components:{
			dyItem
		},
		data() { 
			return {
				HOSTURL:this.$HOSTURL,
				userinfo:{},
				swipertypeCurrent: 0,
				swipertypelist: [{
					name: '我解锁的'
				}, {
					name: '解锁我的'
				}],
				refresher: [false, false],
				dymaniclist: [[],[]],
				fixswiper: {
					header: 40,
					footer: 50
				},
				data: {
					userid: this.$store.state.userid,
					count: 10,
					longitude: this.$store.state.longitude,
					latitude: this.$store.state.latitude,
					sex: 0,
					new: 0,
					recently: 0,
					pagecount: 10,
					pagesize: 10
				},
				page: [0,0],
				dyopidx: -1,
			}
		},
		onLoad() {
			this.getDymanic()
		},
		onReachBottom(){
			this.onreachBottom()
		},
		onPullDownRefresh () {
			this.refresherrefresh()
			setTimeout(() => {
				//结束下拉刷新
			  uni.stopPullDownRefresh ();
			}, 1000);
		},
		methods:{
			// tabs通知swiper切换
			tabsChange(index) {
				this.swipertypeCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transitions(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinishs(e) {
				let swipertypeCurrent = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(swipertypeCurrent);
				this.swipertypeCurrent = swipertypeCurrent;
				this.swipertypeCurrent = swipertypeCurrent;
			},
			async getDymanic(cb) {
				this.data.nearby = this.swipertypeCurrent
				this.data.page = this.page[this.swipertypeCurrent]
				const {
					data: res
				} = await this.$Request({
					url: 'apis/home/Dymanic/dymaniclst',
					data: this.data
				})
				if (!res) return false
				if (res.result.length < 10) {
					this.status = 'nomore';
				}
				this.$set(this.dymaniclist,this.swipertypeCurrent,this.dymaniclist[this.swipertypeCurrent].concat(res.result))
				typeof cb == 'function' && cb()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status == 'nomore') return false
				this.status = 'loading'
				this.page[this.swipertypeCurrent]++
				this.getDymanic()
			},
			refresherrefresh(){
				this.$set(this.refresher,this.swipertypeCurrent,true)
				this.status = 'loadmore';
				this.page[this.swipertypeCurrent] = 0
				this.dymaniclist[this.swipertypeCurrent] = []
				this.getDymanic(()=>{
					this.$set(this.refresher,this.swipertypeCurrent,false)
					console.log(111)
				})
			}
		},
		watch: {
			swipertypeCurrent(){
				if(this.dymaniclist[this.swipertypeCurrent].length == 0){
					this.getDymanic()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.center {
		position: relative;
		min-height: 100vh;
		min-height: 100vh;
		background: #0f0d0f;
		/deep/.u-navbar {
			background-color: #0f0d0f!important;
		}
	}
	.swiperwrap {
		padding: 20rpx;
		/deep/uni-swiper{
			background-color: #302f39!important;
		}
		/deep/swiper{
			background-color: #302f39!important;
		}
	}
	.header{
		position: absolute;
		top: 184rpx;
		width: 100vw;
		background: #0f0d0f;
		z-index: 10;
	}
	.list{
		position: absolute;
		top: 130rpx;
		width: 100vw;
		z-index: 9;
	}
	.zwjsjl{
		width: 315rpx;
		height: 315rpx;
		margin:400rpx 217rpx;
	}
</style>